<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Finance Type Manager</title>
<meta content="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css-->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/customdefine.css" rel="stylesheet">

</head>
<body>
	<div class="container">
		<%@include file="../navbar.jsp"  %>
		<div id="financeType">
		<span class="pageHeader">Finance Type Manage</span>
		<div id="managerContainer">
			<ul class="nav nav-tabs" id="myTab">
			  <li id="bigTypeTab" class="active"><a href="#bigType" data-toggle="tab">大类别</a></li>
			  <li id="smallTypeTab" ><a href="#smallType" data-toggle="tab">小类别</a></li>
			</ul>
			<div class="tab-content">
			  <div class="tab-pane active" id="bigType">
			  	<div>
				  	<c:forEach var="bigType" items="${bigTypeList }">
				  	<div class="single-type" id="bigType${bigType.type_id }">
				  	${bigType.type_name }
				  	<span class="minus-icon">
				  		<i class="icon-minus-sign"></i>
				  	</span>
				  	</div>
				  	</c:forEach>
				  	<div class="addType">
				  		<span class="minus-icon">
				  			<i class="icon-plus-sign" data-parent="bigType"></i>
				  		</span>新建
				  	</div>		  
			  	</div>
			  </div>
			  <div class="tab-pane" id="smallType">
			  <!--  -->
				  <div class="accordion span5" id="accordionFirst">
				  		<c:forEach var="bigType" items="${bigTypeList }" begin="0" step="2">
					  	<div class="accordion-group">
					  		<div class="accordion-heading">
					  			<a class="accordion-toggle" data-toggle="collapse" data-parent="accordionFirst" href="#collapse${bigType.type_id }">
					  			${bigType.type_name }
					  			</a>
					  		</div>
					  		<div id="collapse${bigType.type_id }" class="accordion-body collapse">
					  			<c:forEach var="smallType" items="${bigType.smallTypeSet }">
					  			<div class="single-type" id="smallType${smallType.type_id }">
							  	${smallType.type_name }
							  	<span class="minus-icon">
							  		<i class="icon-minus-sign"></i>
							  	</span>
							  	</div>
					  			</c:forEach>
					  			<div class="addType">
							  		<span class="minus-icon">
							  			<i class="icon-plus-sign" data-parent="${bigType.type_id }"></i>
							  		</span>新建
							  	</div>
					  		</div>
					  	</div>
				  		</c:forEach>
				  </div>
				  <div class="accordion span5" id="accordionSecond">
				  		<c:forEach var="bigType" items="${bigTypeList }" begin="1" step="2">
					  	<div class="accordion-group">
					  		<div class="accordion-heading">
					  			<a class="accordion-toggle" data-toggle="collapse" data-parent="accordionSecond" href="#collapse${bigType.type_id }">
					  			${bigType.type_name }
					  			</a>
					  		</div>
					  		<div id="collapse${bigType.type_id }" class="accordion-body collapse">
					  			<c:forEach var="smallType" items="${bigType.smallTypeSet }">
					  			<div class="single-type" id="smallType${smallType.type_id }">
							  	${smallType.type_name }
							  	<span class="minus-icon">
							  		<i class="icon-minus-sign"></i>
							  	</span>
							  	</div>
					  			</c:forEach>
					  			<div class="addType">
							  		<span class="minus-icon">
							  			<i class="icon-plus-sign" data-parent="${bigType.type_id }"></i>
							  		</span>新建
							  	</div>
					  		</div>
					  	</div>
				  		</c:forEach>
				  </div>
			  <!--  -->
			  
			  </div>
			</div>
			
			<div id="newType" class="modal hide fade">
			  <div class="modal-header">
			    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			    <h3>增加分类</h3>
			  </div>
			  <div class="modal-body">
			  	<form id="addNewTypeForm" action="<%=path %>/addBigType.htm" method="post">
			    <input id="newBigTypeName" type="text" placeholder="类别名" name="typeName"/>
			  	<input id="bigTypeId" name="bigTypeId" type="hidden" value="0"/>
			  	</form>
			  </div>
			  <div class="modal-footer">
			    <a class="btn" data-dismiss="modal" aria-hidden="true">取消</a>
			    <a id="addNewType" class="btn btn-primary">确认</a>
			  </div>
			</div>
		</div>
		</div>
	</div>
	
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script>
	  $(function () {
		  $(".icon-minus-sign").click(function(){
			  var typeId = $(this).parent().parent().attr('id');
			  var flag=confirm("确认要删除此类别？");
			  if (flag==true)
			    {
				  $('#'+typeId).remove();
				  if(typeId.indexOf('bigType') != -1){
					  window.location.href="deleteBigType.htm?typeId="+typeId;
					  /* $.ajax({
						  url:"deleteBigType.htm",
						  type:"get",
						  data:{typeId:typeId}
					  }); */
				  }
				  if(typeId.indexOf('smallType') != -1){
					  $.ajax({
						  url:"deleteSmallType.htm",
						  type:"get",
						  data:{typeId:typeId}
					  });
				  }
			    }
		  });
		  $(".icon-plus-sign").click(function(){
			  var flag = $(this).attr('data-parent');
			  if(flag != 'bigType'){
				  $("#addNewTypeForm").attr('action','addSmallType.htm');
				  $("#bigTypeId").val(flag);
			  }
			  $("#newType").modal('show');
		  });
		  $('#addNewType').click(function(){
			  $("#newType").modal('hide');
			  $("#addNewTypeForm").submit();
			  $("#newBigTypeName").val("");
		  });
	  });
	  $(function () {
		 var pathFlag = '${pathFlag}';
		 if(pathFlag == 'smallType'){
			 $('#bigTypeTab').removeClass("active");
			 $('#smallTypeTab').addClass("active");
			 $('#bigType').removeClass("active");
			 $('#smallType').addClass("active");
			 var typeFlag = '${bigTypeId}';
			 $('#collapse'+typeFlag).addClass("in");
		 }
	  });
	</script> 
</body>
</html>